<!DOCTYPE html>
<!--HTML5 doctype-->
<html>
     
    <head>
        <title>jqMobi Starter</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        

        <link rel="stylesheet" type="text/css" href="kitchensink/icons.css" /> 

        
        <link rel="stylesheet" type="text/css" href="kitchensink/jq.ui.frosty.css" title="volcano" />
        <!-- uncomment for AppMobi apps
        <script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/appmobi.js"></script> 
        <script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/xhr.js"></script>   
        -->
        
        <script type="text/javascript" charset="utf-8" src="./jq.mobi.js"></script> 
        <script type="text/javascript" charset="utf-8" src="./ui/jq.ui.js"></script>

        <script type="text/javascript" charset="utf-8" src="./plugins/jq.swipe.js"></script>
        <script type="text/javascript" charset="utf-8" src="./plugins/jq.carousel.js"></script>

        
        <!-- include touch.js on desktop browsers only -->
        <script>
            if (!((window.DocumentTouch && document instanceof DocumentTouch) || 'ontouchstart' in window)) {
                var script = document.createElement("script");
                script.src = "touch.js";
                var tag = $("head").append(script);
                $.os.android = true; //let's make it run like an android device
                $.os.desktop = true;
            }
 
        </script>
        <script type="text/javascript">
             
            var webRoot = "./";
            $.ui.autoLaunch = false; //By default, it is set to true and you're app will run right away.  We set it to false to show a splashscreen
            /* This function runs when the body is loaded.*/
            var init = function () {
                    $.ui.backButtonText = "Back";// We override the back button text to always say "Back"
                    window.setTimeout(function () {
                        $.ui.launch(); 
                    }, 1500);//We wait 1.5 seconds to call $.ui.launch after DOMContentLoaded fires
                };
            document.addEventListener("DOMContentLoaded", init, false);
            $.ui.ready(function () {
                //This function will get executed when $.ui.launch has completed
            });
 
            
            /* This code is used for appMobi native apps */
            var onDeviceReady = function () {
                    AppMobi.device.setRotateOrientation("portrait");
                    AppMobi.device.setAutoRotate(false);
                    webRoot = AppMobi.webRoot + "/";
                    //hide splash screen
                    AppMobi.device.hideSplashScreen();
 
            };
            document.addEventListener("appMobi.device.ready", onDeviceReady, false);
        </script>
    </head>
     
    <body>
      <div id="jQUi">
                    
                <div id="content">
                    <div class="panel" id="main" selected="true">
                        <!-- this can really go anywhere in the panel, but we'll put it at the top -->
                        <header>
                            <h1>学习JQMobi</h1>
                            <a class="button" style="float:right;" class="icon home big">home</a>
                        </header>
                         
                        <!-- content goes here -->
                        <!-- checkbox -->
                        <input type="checkbox" name="confirm" id="confirm" class="jq-ui-forms">
                            <label for="confirm">Do you agree to the terms?</label>
                        </input>
                        <br>
                        <hr>
                        
                        <a href="javascript:;" onclick="toggleHeader()" class="button">Toggle Header</a>
                        <a href="javascript:;" onclick="$.ui.toggleNavMenu()" class="button">Toggle NavMenu</a>
                        <br>
                        
                        <a href="javascript:;" onclick="showPopup1()" class="button">Show Popup-1</a>
                        <br>
                        <a href="javascript:;" onclick="showPopup2()" class="button">Show Popup-2</a>
                        <br>
                        
                        <a href="#modaldiv" class="button">Show Modal Div</a>
                        <br>
                        
                        
                        <a href="#test" class="button">test</a>
                        <br>
                        <a href="#uigoback" class="button">uigoback</a>
                        <br>
                        <a href="#uishowmask" class="button">Show Mask</a>
                        <br>
                        <a href="#uiloadcontent" class="button">loadContent</a>
                        <br>
                        
                        <!-- 手势swipe -->
                        <a href="#swipe" class="button">Swipe</a>
                        <br>
                        
                        <!-- 旋转木马Carousel -->
                        <a href="#Carousel" class="button">旋转木马Carousel</a>
                        <br>


                        <a href="#iscroll" class="button">iscroll</a>
                        <br>
                        
                        
                        <!-- 加载外部页面  External Page -->
                        <a href="#loadexternalpage" class="button">加载外部页面 Load External Page</a>
                        <br>


                        <footer>
                            <a href='#about' class='icon info'>About</a>
                        </footer>
            
                  </div>
                
                    <!-- -->
                    <div id="uigoback" title="Go Back" class="panel" data-footer='akenfooter'>
                        You can use this command to go back in history.
                        <pre>
                        $.ui.goBack()
                        </pre>
                        <a href="javascript:;" onclick="$.ui.goBack()" class="button">Go Back</a>
                    </div>
                    
                    <!-- -->
                    <div id="uishowmask" title="Show Mask" class="panel" data-footer='footerui'>
                        This will show the loading mask.  You can trigger this manually for long operations.
                        <pre>
                        $.ui.showMask();
                        </pre>

                        <script>
                            function showMask(text){
                                $.ui.showMask(text);
                                window.setTimeout(function(){$.ui.hideMask();},2000);
                            }
                        </script>
                        <a href="javascript:;" onclick="showMask('Mask will hide in 2 seconds')" class="button">Show Mask</a>
                    </div>
                    
                    <!-- -->
                    <div id="uiloadcontent" title="loadContent" class="panel" data-footer='footerui'>
                    在panel中直接加载panel
                    <a href="javascript:;" onclick="$.ui.loadContent('uiapi',false,false,'fade')" class="button">在panel中直接加载panel</a>
                    </div>
                    <!-- --><!-- -->
                    <div id="uiapi" title="jqUi API" class="panel" data-pull-scroller='true' data-footer='footerui'>
                        <ul>
                            <li><a href="#uigoback">.goBack()</a></li>
                            <li><a href="#uiclearhistory">.clearHistory()</a></li>
                            <li><a href="#uiaddcontentdiv">.addContentDiv ()</a></li>
                            <li><a href="#uisettitle">.setTitle(text) </a></li>
                            <li><a href="#uisetbackbutton">.setBackButtonText() </a></li>
                            <li><a href="#uishowmask">.showMask() </a></li>
                            <li><a href="#uihidemask">.hideMask() </a></li>
                            <li><a href="#uiloadcontent">.loadContent(); </a></li>
                            <li><a href="#uilaunch">.launch(); </a></li>
                            <li><a href="#uiready">.ready(); </a></li>
                            <li><a href="#uibadge">.updateBadge(); </a></li>
                            <li><a href="#uiremovebadge">.removeBadge(); </a></li>
                            <li><a href="#uitoggleheader">.toggleHeaderMenu(); </a></li>
                            <li><a href="#uitoggleside">.toggleSideMenu(); </a></li>
                            <li><a href="#uitogglenav">.toggleNavMenu(); </a></li>
                            <li><a href="#uiactionsheet">.actionsheet() </a></li>
                            <li><a href="#uiscrolltotop">.scrollToTop() </a></li>
                        </ul>
                    </div>
                    
                    
                    <!-- -->
                    <div id="modaldiv" class="panel" data-modal="true">
                        zj.aken@gmail.com
                        <br><br><br>
                        Check the input box out below.  <br>
                        <input type="text" class="jq-ui-forms">
                    </div>
                    
                    <!-- -->
                    <div id="swipe" title="手势学习swipe" class="panel" data-footer='footerui'>
                        <div id="swipediv" style="height: 200px; width: 95%; background:#ccc"></div>
                        <div id="debug"></div>

                        <br>
                        <a href="javascript:;" onclick="toggleswipe();" class="button">绑定swipe事件</a>

                        <style>
                            .result {position:absolute;left:100px;}
                        </style>
                        <script type="text/javascript">
                            function toggleswipe(){
                                $("#swipediv").swipeListener({
                                    vthreshold: 30,
                                    hthreshold: 50,
                                    callBack: function (dir) {
                                        debugMsg(dir);
                                    }
                                });
                                alert("swipe事件绑定成功！");
                            }

                            function debugMsg(direction){
                                var debug = document.getElementById("debug");
                                debug.innerHTML =
                                "Up: <span class='result'>" + direction.up + "</span><br />" +
                                "Down: <span class='result'>" + direction.down + "</span><br />" +
                                "Left: <span class='result'>" + direction.left + "</span><br />" +
                                "Right: <span class='result'>" + direction.right + "</span><br />";
                                
                            }
                        </script>
                    </div>




                    <!-- 旋转木马Carousel -->
                    <div id="Carousel" title="旋转木马Carousel" class="panel" data-footer='footerui' >
                        <style>
                            .carousel_paging2 {
                                border-radius: 10px;                                
                                background: #ccc;
                                width: 10px;
                                height: 10px;
                                float: left;
                            }

                            .carousel_paging2_selected {
                                border-radius: 10px;                                
                                background: #000;
                                width: 10px;
                                height: 10px;
                                float: left;
                            }

                            .box {
                                position: relative;
                                *display: table-cell;
                                vertical-align: middle;
                                text-align: center;
                                border: 1px solid #eee;
                                height: 100%;
                                width: 100%;
                            }

                            .box img {
                                vertical-align: middle;
                                max-height: 800px;
                                max-width: 800px;
                            }
                        </style>

                        <script type="text/javascript">
                            function togglecarousel(){
                                var carousel=$("#carousel").carousel({
                                    pagingDiv: "carousel_dots",
                                    pagingCssName: "carousel_paging2",
                                    pagingCssNameSelected: "carousel_paging2_selected",
                                    preventDefaults:false
                                });
                            }
                        </script>

                        <br>
                        <a href="javascript:;" onclick="togglecarousel();" class="button">绑定carousel事件</a>
                        <br>

                        <div id="carousel_dots" style="text-align: center; margin:auto; clear: both; position: relative; top: 40%; z-index: 200">
                        </div>  
                        <div id="carousel" style="border:1px solid #666;margin:20px;">
                            
                            <div class="box"><img src="./pto/1.jpg"></div>
                            <div class="box"><img src="./pto/2.jpg"></div>
                            <div class="box"><img src="./pto/3.jpg"></div>
                            <div class="box"><img src="./pto/4.jpg"></div>
                            
                        </div>

                        



                    </div>    
                    
                    <!-- iscroll -->
                    <div id="iscroll" title="iscroll框架学习" class="panel" data-footer='footerui'>
                        <div id="iscrolldiv" style="height: 1000px; width: 50%; background:#ccc">
                            -----------------------------------001<br>
                            -----------------------------------002<br>
                            -----------------------------------003<br>
                            -----------------------------------004<br>
                            -----------------------------------005<br>
                            -----------------------------------006<br>
                            -----------------------------------007<br>
                            -----------------------------------008<br>
                            -----------------------------------009<br>
                            -----------------------------------010<br>
                        </div>
                        <div id="debugdiv"></div>
                    </div>


                    <!-- Load External Page -->
                    <div id="loadexternalpage" title="加载外部页面External Page" class="panel" data-footer='footerui'>
                        <a href="external.html" data-persist-ajax="true" data-refresh-ajax="true" data-pull-scroller="true" class="button">加载外部页面External Page</a>

                    </div>
                    
               </div>
            
                <div id="test" title="test panel" class="panel">
                    test in div 
                </div>
                <footer id="akenfooter">
                    aaaaaaaaaaaa
                </footer>
                <div id="navbar">
                   <a target="#welcome" class="icon home">Home</a>
                </div>
 
            </div>
    </body>


<script>
    function toggleHeader(){
        $.ui.toggleHeaderMenu();
    }
    function showPopup1(){
        $("#jQUi").popup("alert box\n你看到我了吗？？？");
    }
    function showPopup2(){
        $("#jQUi").popup({ title:"Alert! Alert!",
        message:"This is a test of the emergency alert system!! Don't PANIC!",
        cancelText:"Cancel me", 
        cancelCallback: function(){console.log("cancelled");},
        doneText:"I'm done!",
        doneCallback: function(){console.log("Done for!");},
        cancelOnly:false}
        );
    }
    
    
    //isScroll JS
    var myScroll;
    function loaded() {
        myScroll = new iScroll('iscroll', {checkDOMChanges:true, zoom:true});
        /*
        setInterval(function () {
            if (myScroll.isReady())
                document.getElementById('thelist').innerHTML += '<ul><li>new row</li></ul>';
        }, 2000);
        */
    }
    
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
    document.addEventListener('DOMContentLoaded', loaded, false);
</script>
</html>